<template xmlns="">
	<div class="discount">
		<div class="s">
			<div class="head">
				优惠
				<div class="box"></div>
				<button class="btn1" @click="go">BACK</button>
				<div class="btn2">
					<Icon type="md-search" size="19"/>
				</div>
				<div class="headrs" :style="bat">
					<List>
						<ListItem>
							<template slot="extra">
								<button class="pos" @click="fan">
									<Icon type="ios-arrow-back"/>
								</button>
							</template>
							<ListItemMeta/>
							<template slot="extra">
								<button @click="tiao">
									<Icon type="ios-arrow-forward"/>
								</button>
							</template>
						</ListItem>
					</List>
				</div>
			</div>
		</div>
		<div class="z">
			<div class="head">
				最新优惠
			</div>
			<div class="shop">
				<div class="yh" v-for="(a,b) in discon">
					<div>
						<div class="bc">
							<svg viewBox="0 0 125 125">
								<path
										d="M 62.5 62.5
											m -40 0
											a 40 40 0 1 0 80 0
											a 40 40 0 1 0 -80 0"
										fill="none"
										stroke="black"
										stroke-width="45">
								</path>
								<path
										d="M 62.5 63
											m -40 0
											a 40 40 0 1 0 80 0
											a 40 40 0 1 0 -80 0"
										fill="none"
										stroke="#FEFE00"
										stroke-linecap="inherit"
										class="my-svg-path"
										transform="rotate(90,50,50)"
										stroke-width="35"
										stroke-dasharray="252.2px, 252.2px"
										:stroke-dashoffset="a.value">
								</path>
							</svg>
							<span>{{val[b]}}%</span>
						</div>
					</div>
					<div class="cen">
						<h1>{{a.info}}</h1>
					</div>

					<div class="rig" :style="pictured">
					</div>
				</div>
			</div>

		</div>
		<div class="x">
			<div class="head">
				限时特惠
			</div>
			<div class="fol">
				<div class="img1" :style="picture"></div>
				<div class="img1">
					<div class="img2" :style="pictures"></div>
					<div class="img2" :style="pictures"></div>
				</div>
				<div class="img1" :style="picture"></div>
			</div>
		</div>
		<div class="foot">
			<div class="btn3" v-if="popup">
				<div class="btn4">
					<button>
						<Icon type="md-settings" size="35"/>
					</button>
				</div>
				<div class="btn">
					<button>
						<Icon type="md-person" size="35"/>
					</button>
				</div>
				<div class="btn4">
					<button>
						<Icon type="ios-reverse-camera" size="35"/>
					</button>
				</div>
			</div>
			<button class="btn7" :style="btn" @click="info"></button>
		</div>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Discount",
		data() {
			return {
				btn: "background-image: url('" + require("../../assets/minbat.png") + "')",
				popup: false,
				bat: "background-image: url('" + require("../../assets/maxbatman.png")+ "')",
				picture: "background-image: url('/static/img/kill.png' )",
				pictures: "background-image: url('/static/img/king.png' )",
				pictured: "background-image: url('/static/img/kill.png' )",
				back: '',
				discon: '',
				val: [],
			}
		},
		async mounted() {
			let discon = await axios.post('/reception/assembly/ranking').then(r => r.data);
			console.log(discon)
			for (let a in discon) {
				let va = (252.2 - (252.2 * (discon[a].value) / 100))
				this.val[a] = discon[a].value;
				discon[a].value = va;
			}
			this.discon = discon
			console.log(discon)
		},
		methods: {
			info() {
				if (this.popup) {
					this.popup = false
				} else {
					this.popup = true
				}
			},
			go() {
				return this.$router.push('/users/index')
			},
			tiao() {
				return this.$router.push('/users/hot')
			},
			fan() {
				return this.$router.push('/users/nearby')
			},
		}
	}
</script>
<style lang="less">
	.discount {
		max-width: 1024px;
		max-height: 1366px;
		margin: auto;

		.my-svg-path {
			transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;
			transform: rotateZ(180deg);
			transform-origin: 50% 50%;
			position: absolute;
			top: 0;

		}

		.bc {
			position: relative;
			background-color: #333333;
			border-radius: 50%;
			width: 100px;
			height: 100px;
			text-align: center;
			color: white;
			float: left;
			clear: both;

			span {
				position: absolute;
				top: 50px;
				left: 25px;
				font-size: 13px;
				width: 50px;
				height: 50px;
			}
		}

		.ivu-list-item {
			padding-top: 35px;
		}

		svg {
			transform: rotate(-90deg);
		}

		.progress {
			animation: rotate 3s linear both;
		}

		@keyframes rotate {
			0% {
				stroke-dashoffset: 0px;
			}
			100% {
				stroke-dashoffset: -50;
			}
		}

		.s {
			width: 100%;
			height: 146px;
			background-color: #FEFE00;

			.headrs {
				position: relative;
				width: 100%;
				height: 111px;
				background-repeat: no-repeat;
				background-size: 200px;
				background-position: 60%;
				color: blue;

				.pos {
					position: absolute;
					left: 0;
				}

				button {
					background: #F7F908;
					border: 0px;
				}
			}
		}

		.z {
			width: 100%;
			height: 240px;

			.shop {
				width: 100%;
				height: 205px;
				overflow: auto;

				.yh {
					width: 100%;
					height: 50%;
					border: 1px solid #F0F0F0;

					.cen {
						line-height: 1.5;
						width: 40%;
						height: 80%;
						float: left;
						margin-left: 4%;

						h1 {
							font-size: 5px;
						}
					}

					.rig {
						height: 100%;
						width: 28%;
						float: left;
						background-size: 100px;
						background-repeat: no-repeat;
						background-position: center;
					}
				}
			}

		}

		.z > .head {
			padding: 0;
		}

		.x {
			width: 100%;
			height: 246px;

			.head {
				padding: 0;
			}
			.fol {
				height: 211px;
				width: 100%;

				.img2 {
					width: 100%;
					height: 49%;
					margin: 1% 0;
					float: left;
					border: 1px solid #F0F0F0;
					background-size: 100px;
					background-repeat: no-repeat;
					background-position: center;
				}

				.img1 {
					border: 1px solid #F0F0F0;
					width: 32%;
					height: 100%;
					margin-left: 1%;
					float: left;
					background-size: 20px;
				}

				overflow: auto;
			}
		}

		.foot {
			height: 35px;
			color: #FEFE00;
			width: 100%;
			background: black;
			font-size: 22px;
			text-align: center;
			line-height: 1.5;
			position: relative;

			.btn3 {
				margin: auto;
				margin-top: -90px;
				width: 50%;
				height: 125px;
				background-color: rgba(0, 0, 0, 0.3);
				float: left;
				margin-left: 25%;
				border-radius: 50%;

				.btn4 {
					width: 33%;
					height: 75px;
					float: left;
					margin-top: 35px;

				}

				button {
					width: 80%;
					height: 50px;
					border-radius: 50%;
					line-height: 0px;
					background-color: black;
					border: 5px solid #FEFE00;
					color: #FEFE00;
				}

				.btn {
					margin-top: 10px;
					width: 33%;
					height: 75px;
					float: left;
				}
			}

			.btn7 {
				width: 60px;
				height: 60px;
				position: absolute;
				left: 42%;
				top: -25px;
				border-radius: 50%;
				text-align: center;
				border: 0;
				background-repeat: no-repeat;
				background-position: 60%;
				background-size: 73px 75px;
			}
		}

		.head {
			height: 35px;
			color: #FEFE00;
			width: 100%;
			background: black;
			font-size: 22px;
			text-align: center;
			padding-right: 10px;
			line-height: 1.5;
			position: relative;
		}

		.head > .btn2 {
			height: 25px;
			width: 25px;
			float: right;
			margin-top: 5px;
			text-align: center;
			padding-top: 3px;
			line-height: 0px;
			background-color: #FEFD04;
			color: black;
			border-radius: 5px;
		}

		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid #FEFE00;
		}

		.clear {
			clear: both;
		}

		.btn1 {
			background: #FEFE00;
			font-size: 10px;
			margin-top: 7px;
			margin-left: -1px;
			color: black;
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
	}

</style>